<template>
  <div class="table-design-wrap">
    <h4 class="title">
      <div class="add-col">
        <el-tooltip effect="dark" content="添加一列" placement="top-start">
          <i @click="addCol" class="el-icon-circle-plus"></i>
        </el-tooltip>
      </div>
      普通列表设计
    </h4>

    <div class="table-col">
      <div class="desc">
        <div class="col">列标题：</div>
        <div class="col">标识符：</div>
        <div class="col">填充类型：</div>
        <div class="col">触发事件：</div>
        <div class="col">宽度：</div>
        <div class="col">固定列：</div>
      </div>
      <draggable
        v-model="element.columns"
        :scroll="true"
        class="draggable"
        v-bind="{
          group: 'table',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.mover',
        }"
        dragClass="dragClass"
      >
        <transition-group
          tag="div"
          class="draggable-wrap table-wrap"
          :style="tableWrapStyle"
        >
          <div
            :class="['tr', 'col', col.key == currentCol.key ? 'colActive' : '']"
            v-for="(col, index) in element.columns"
            :key="index"
            @click="selectCurrentCol(col)"
          >
            <span class="mover">
              <i class="el-icon-rank"></i>
            </span>
            <span class="copy" @click="copyCol(element.columns, index)">
              <i class="el-icon-copy-document"></i>
            </span>
            <span class="remove" @click="removeCol(element.columns, index)">
              <i class="el-icon-delete"></i>
            </span>
            <div class="td">
              <el-input v-model="col.label" placeholder="请输入内容"></el-input>
            </div>
            <div class="td">
              <el-input v-model="col.prop" placeholder="请输入内容"></el-input>
            </div>
            <div class="td">
              <el-select
                v-model="col.type"
                clearable
                placeholder="请选择列类型"
              >
                <el-option
                  v-for="item in tableColTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="td">
              <el-select
                v-model="col.eventType"
                clearable
                placeholder="请选择触发事件"
              >
                <el-option
                  v-for="item in store.eventCollection"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="td">
              <el-input
                v-model="col.width"
                clearable=""
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="td">
              <el-switch
                v-model="col.fixed"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div></div>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import clone from 'clone'
import Draggable from 'vuedraggable'
import { tableColType } from '@/low-code/utils/enumeration.js'
export default {
  props: ['element', 'data', 'index'],
  components: {
    Draggable,
  },
  data() {
    return {
      currentCol: {},
      tableColType,
      tableColTypes: [
        {
          value: tableColType.DATE,
          label: '日期',
        },
        {
          value: tableColType.INPUT,
          label: '输入框',
        },
      ],
      tableWidth: 0,
    }
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
    tableWrapStyle() {
      return {
        width: this.tableWidth + 'px',
      }
    },
  },
  watch: {
    'element.columns': {
      handler() {
        this.$handleStack.push(clone(this.store.root))
      },
      deep: true,
    },
  },
  methods: {
    selectCurrentCol(col) {
      this.currentCol = col
    },
    copyCol(list, index) {
      let newCol = clone(list[index])
      newCol['key'] = this.random(5)
      list.splice(index, 0, newCol)
    },
    removeCol(list, index) {
      this.$delete(list, index)
    },
    random(n) {
      let len = n || 8
      let $chars = 'ABCDEFGHJKMNPQRSTWXYZ'
      let maxPos = $chars.length
      let id = ''
      for (let i = 0; i < len; i++) {
        id += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return id
    },
    addCol() {
      this.$set(this.element.columns, this.element.columns.length, {
        prop: this.random(5),
        label: '新增列',
        width: '',
        type: '',
        key: this.random(5),
      })
    },
    conputedWidth() {
      this.tableWidth = document.querySelector('.main').offsetWidth - 160
      console.log('xxx', this.tableWidth)
    },
  },
  mounted() {
    this.conputedWidth()
  },
}
</script>

<style lang="scss" scoped>
.table-design-wrap {
  padding: 10px;
  .title {
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    margin-bottom: 20px;
    position: relative;
    .delete-area {
      position: absolute;
      right: 10px;
      top: 5px;
      width: 200px;
      height: 48px;
      text-align: right;
      i {
        font-size: 32px;
      }
    }
    .add-col {
      position: absolute;
      left: 10px;
      top: 5px;
      width: 200px;
      height: 48px;
      text-align: right;
      text-align: left;
      i {
        font-size: 32px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
  .table-wrap {
    overflow-x: auto;
    height: 100%;
    background: url('~@/low-code/assets/emptytablepic.png');
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 12px;
  }
  .col {
    position: relative;
  }
  .draggable-wrap {
    display: flex;
    border: 2px solid #dcdfe6;
    .tr {
      width: 150px;
      min-width: 150px;
      text-align: center;
      line-height: 32px;
      background: white;
      border: 1px solid transparent;
      .td {
        padding: 5px;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
      }
      .td:nth-child(1) {
        background: #f6f6f6;
      }
    }
  }
}

// .dragClass {
//   border: solid 2px #3089dc !important;
// }
.el-icon-delete {
  color: #f56c6c;
  cursor: pointer;
}
.el-select {
  width: 100%;
}

.table-col {
  display: flex;
  .desc {
    width: 100px;
    flex-shrink: 0;
    .col {
      line-height: 43px;
      text-align: right;
      padding-right: 20px;
      font-size: 13px;
      font-weight: bold;
    }
  }
}

.colActive {
  border: 1px solid #13ce66 !important;
  .mover {
    cursor: move;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
    background-color: #13ce66;
    display: block;
  }
  .copy {
    position: absolute;
    right: 42px;
    bottom: -12px;
    /* height: fit-content !important; */
    display: block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: #cbe8ff;
    border: 1px solid #7dc4f9;
    border-radius: 50%;
    opacity: 1;
    line-height: 24px;
    text-align: center;
    font-size: 13px;
    color: #7dc4f9;
    z-index: 99;
  }
  .remove {
    position: absolute;
    right: 12px;
    bottom: -12px;
    /* height: fit-content !important; */
    display: block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: #ffebeb;
    border: 1px solid #fcb2b2;
    border-radius: 50%;
    opacity: 1;
    line-height: 24px;
    text-align: center;
    font-size: 13px;
    color: #fc5757;
    z-index: 99;
  }
}

.table-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 15px;
}

.table-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 5px #dcdfe6;
  box-shadow: inset 0 0 3px #dcdfe6;
  background: #dcdfe6;
}

.table-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}
</style>
